<template>
	<view class="main">
		<view class="title">
			<text class="fw_700 c333">请拍摄/上传本人身份证</text> <br>
			<text class="fz26 c999 ">请确保证件边框完整、字体清晰、亮度均匀</text>
		</view>
		<view class="ul flex_col mt20">
			<view class="li  flex_align">
				<text class="item_name">姓名</text>
				<input class="item_input flex" v-model="form.name" type="text" placeholder="请输入姓名（必填）" maxlength="20">
			</view>
			<view class="li  flex_align">
				<text class="item_name">身份证</text>
				<input class="item_input flex" v-model="form.id_card" type="text" placeholder="请输入身份证号（必填）" maxlength="50">
			</view>
		</view>
		<view @click="chooseImage(1)">
			<view class="idCard">
				<image src="@/static/img/my/realName/right_side.png" class="img100" mode="aspectFill">
				</image>
			</view>
			<view class="right_side">
				<image :src="form.images1" class="img100" mode="aspectFill">
				</image>
			</view>
		</view>
		<view @click="chooseImage(2)">
			<view class="idCard">
				<image src="@/static/img/my/realName/reverse_side.png" class="img100" mode="aspectFill">
				</image>
			</view>
			<view class="reverse_side">
				<image :src="form.images2" class="img100" mode="aspectFill">
				</image>
			</view>
		</view>
		<view class="btn flex_center_align" @click="submit">
			开始上传
		</view>
		<view class="footer flex">
			<view class="icon mr10">
				<image src="@/static/img/my/realName/icon.png" style="display: block; padding: 0; margin: 0;" class="img100"
					mode="aspectFill">
				</image>
			</view>
			<text class="fz26 c-666">小竹-法规科智能加密，实时保障你的信息安全</text>
		</view>
	</view>
</template>

<script>
import { checkIdCard } from '@/api/my.js'
import { httpUpload } from '@/utils/http.js'
export default {
	data() {
		return {
			form: {
				name: '',
				id_card: '',
				images1: '',
				images2: '',
			},
			path: '',
		};
	},
	methods: {
		//选择图片
		chooseImage(type) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: (res) => {
					console.log(res.tempFilePaths[0]);
					if (res.tempFilePaths.length > 0) {
						this.uploadImage(res.tempFilePaths[0], type);
					}
				}
			});
		},

		//上传图片
		uploadImage(img, type) {
			var that = this;
			httpUpload(this.$paths.commonUpload, img).then(res => {
				if (res.code == 1) {
					that.form[`images${type}`] = res.data.fullurl;
				} else {
					that.$tools.showToast(res.msg);
				}
			})
				.catch(err => {
					console.log('错误回调', err);
				});
		},


		//提交
		submit() {
			if (!this.$used.IsEmpty(this.form.name)) {
				this.$used.msg('请输入姓名')
				return false
			}
			if (this.form.id_card == null || this.form.id_card.length != 18) {
				this.$used.msg('请输入正确的身份证号')
				return false
			}
			checkIdCard(this.form).then(res => {
				if (res.code == 1) {
					this.$used.msg('上传成功')
					uni.redirectTo({
						url: './success?type=2&path=' + this.path
					});
				} else {
					this.$used.msg(res.msg)
				}
			})
		},
	},
	onLoad(e) {
		this.path = e.path
	}
}
</script>

<style lang="scss" scoped>
.main {
	position: relative;
	min-height: 100vh;
	background-color: #F9F7FC;
	overflow: hidden;
	padding: 50rpx;

	.title {
		margin-top: 30rpx;
		font-weight: 500;
		font-size: 36rpx;
		line-height: 40rpx;
	}

	.ul {
		padding: 0 0 0 30rpx;
		background-color: #fff;

		.li {
			position: relative;
			height: 112rpx;

			.item_name {
				width: 170rpx;
				font-size: 32rpx;
				color: #222229;
			}

			.arrow_right {
				position: absolute;
				right: 80rpx;
			}

			.item_input {
				font-size: 28rpx;
				padding-right: 30rpx;
			}
		}
	}

}



.idCard {
	border: 1rpx dashed #000000;
	margin-top: 40rpx;
	width: 610rpx;
	height: 310rpx;
}

.right_side {
	position: absolute;
	top: 470rpx;
	left: 106rpx;
	width: 487rpx;
	height: 264rpx;
}

.reverse_side {
	position: absolute;
	top: 816rpx;
	left: 106rpx;
	width: 487rpx;
	height: 264rpx;
}

.btn {
	margin-top: 60rpx;
	width: 630rpx;
	height: 90rpx;
	background: #1C87F3;
	border-radius: 45rpx;
	color: #fff;
}

.footer {
	padding: 60rpx;

	.icon {
		vertical-align: middle;
		width: 30rpx;
		height: 30rpx;
	}

}
</style>
